{% extends 'common/panel.html' %}
{% load jsonify %}
{% block title %}Tradeoff Analysis Report{% endblock %}

{% block panel %}
<script type="text/javascript" charset="utf-8">

    var xaxis = "{{x_axis}}";
    var xaxis_label = "{{x_label}}";
    var yaxis = "{{y_axis}}";
    var yaxis_label = "{{y_label}}"; 
    
    //var colors = {{colors|safe}};
    var sites = {{sites|safe}};
    var site_names = {{site_names|safe}};
    var site_colors = {{site_colors|safe}};
    var legend_location = "{{legend_location}}";
    
     
    var plot1 = $.jqplot('chartdiv', [sites], {        
        //title: {
        //    text: 'Tradeoff Analysis', 
        //    fontSize: '26px',
        //    fontFamily: ["Lucida Grande","Lucida Sans Unicode","Arial","Verdana","sans-serif"]
        //},
        seriesDefaults:{
            renderer: $.jqplot.BubbleRenderer,
            rendererOptions: {
                bubbleAlpha: 0.6,
                highlightAlpha: 1,
                //bubbleGradients: true,
                //autoscaleBubbles: true,
                autoscaleMultiplier: .5,
                showLabels: false //prevents labels from showing up on the graph
            },              
            shadow: true,
            shadowAlpha: 0.05
        },
        /*
        series: [
            //the following affect the legend...will want to change to function call eventually
            { label: site_names[0] }, 
            { label: site_names[1] }, 
            { label: site_names[2] }, 
            { label: site_names[3] }
        ],
        */
        axes: {
            xaxis: {min: 0, max: 100, label: xaxis_label, numberTicks: 11, 
                    labelOptions: { fontFamily: ["Lucida Grande","Lucida Sans Unicode","Arial","Verdana","sans-serif"] }
                   },
            yaxis: {min: 0, max: 100, label: yaxis_label, numberTicks: 11, 
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
                    labelOptions: { fontFamily: ["Lucida Grande","Lucida Sans Unicode","Arial","Verdana","sans-serif"] }
                   }                
        }, 
                
        legend: {
            renderer: $.jqplot.EnhancedLegendRenderer,
            show: true,
            showLabels: true,
            location: legend_location,
            //placement: 'outside',
            fontSize: '10px',
            fontFamily: ["Lucida Grande","Lucida Sans Unicode","Arial","Verdana","sans-serif"],
            rendererOptions: {
                //numberRows: 3,
                seriesToggle: 'normal'
            }
        }
        
    });
    
    //Populate Legend 
    html = '<tbody>';
    for (i=0; i<sites.length; i++) {
        html += '<tr class="jqplot-table-legend">';
            html += '<td class="jqplot-table-legend jqplot-table-legend-swatch jqplot-seriesToggle" style="text-align: center; padding-top: 0pt;">';
                html += '<div class="jqplot-table-legend-swatch-outline">';
                html += '<div class="jqplot-table-legend-swatch" style="background-color: ' + site_colors[i] + '; border-color: ' + site_colors[i] + '";>';
                //console.log('<div class="jqplot-table-legend-swatch" style="background-color: ' + site_colors[i] + '; border-color: ' + site_colors[i] + '";>');
                html += '</div>';
                html += '</div>';
            html += '</td>';
            html += '<td class="jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style="padding-top: 0pt;">' + site_names[i] + '</td>';
        html += '</tr>';
    };
    html += '</tbody>';
    $(".jqplot-table-legend").html(html); 
    
    $('#chartdiv').bind('jqplotDataHighlight',
        function(ev, seriesIndex, pointIndex, data, radius) { 
            var x = plot1.axes.xaxis.u2p(data[0])-radius-60,  // convert x axis units to pixels
                y = plot1.axes.yaxis.u2p(data[1])-radius-90;  // convert y axis units to pixels
            if ( x > 350 ) { x = 350; }
            if ( x < 50 ) { x = 50; }
            if ( y < 50 ) { y = y + radius * 2 + 94; }  
            var fontfamily = 'Lucida Grande,Lucida Sans Unicode,Arial,Verdana,sans-serif';
            color = site_colors[pointIndex];
            //console.log(data[3] + ': ' + color);
            $('.jqplot-highlighter-tooltip').css({left:x, top:y, 'background-color':'#fafaf5', 'opacity':.8});
            $('.jqplot-highlighter-tooltip').html(
                '<span style="font-family:' + fontfamily + ';font-size:14px;font-weight:bold;color:' + color + ';">' + data[3] + '</span>' +
                '<span style="font-family:' + fontfamily + ';font-size:12px;"><br />' + 
                xaxis_label + ': ' + data[0] + '<br />' + 
                yaxis_label + ': ' + data[1] + '<br />' + 
                'Area: ' + reverseLN(data[2]) + ' sq miles</span>' );
            //$('.jqplot-highlighter-tooltip').html('<span>'+ x + ' ' + y + ' ' + seriesIndex + ' ' + pointIndex + ' ' + data + '</span>');
            $('.jqplot-highlighter-tooltip').show();
        }
    );
    $('#chartdiv').bind('jqplotDataUnhighlight',
        function (ev) {
            //$('.jqplot-highlighter-tooltip').fadeOut();
            $('.jqplot-highlighter-tooltip').empty();
            $('.jqplot-highlighter-tooltip').hide();
            //$('.jqplot-highlighter-tooltip').html('');
        }
    );
        
    function reverseLN(ln_value) {
        return Math.round(Math.pow(Math.E, ln_value) * 10) / 10.;
    }
    
    function toggleLegend(id) {
        if ($("#"+id+" span").text() == 'Hide Legend') { 
            $("#"+id+" span").text('Show Legend'); 
            $(".jqplot-table-legend").hide();
        } else { 
            $("#"+id+" span").text('Hide Legend'); 
            $(".jqplot-table-legend").show();
        }
    }
    
    function toggleDiv(divId, srcId) {
        $("#"+divId).toggle();
        if ($("#"+srcId).text() == 'Read More') { 
            $("#"+srcId).text('Hide Text'); 
        } else if ($("#"+srcId).text() == 'Hide Text') { 
            $("#"+srcId).text('Read More'); 
        }
        if ($("#"+srcId).text() == 'More') { 
            $("#"+srcId).text('Hide'); 
        } else if ($("#"+srcId).text() == 'Hide') { 
            $("#"+srcId).text('More'); 
        }
    }
</script>


<div>
<div id="chartdiv" class="chart" style="left:10px;width:373px;height:380px; "></div>
<label><a id="displayInstructions" href="javascript:toggleDiv('instructions', 'displayInstructions');">More</a></label>
<div id="instructions" style="display: none">
<p>The results are displayed such that shapes that are scored higher for {{x_axis}} will be further along 
   the x-axis (to the right), and those that are scored higher for {{y_axis}} will be further 
   along the y-axis (toward the top).  
<p>Conflict areas, those areas that have high scores for both objectives, 
   will be seen in the upper-right quadrant of the graph.  
</p>
</div>


{% endblock %}